<template>
  <div class="aside">
    <img
      class="aside-img"
      src="@/assets/header/menu.jpg"
      @click="drawer = true"
    />
    <el-drawer
      title="山东水利职业学院"
      :visible.sync="drawer"
      :with-header="false"
      :size="drawersize"
    >
      <el-row class="tac">
        <el-col :span="12" :style="{ width, height }">
          <el-menu
            :default-active="currentroute"
            class="el-menu-vertical"
            background-color="#0b6cb8"
            text-color="white"
            active-text-color="#ffcf46"
            unique-opened
            router
          >
            <label class="aside-label" v-for="item in menulist" :key="item.id">
              <el-menu-item
                @click="nexttop(item.route)"
                :index="item.route"
                v-if="item.children == ''"
              >
                <template slot="title">
                  <span>{{ item.name }}</span>
                </template>
              </el-menu-item>
              <el-submenu :index="item.id + ''" v-else-if="item.children != ''">
                <template slot="title">
                  <span slot="title">{{ item.name }}</span>
                </template>
                <el-menu-item
                  v-for="subItem in item.children"
                  :key="subItem.id"
                  :index="subItem.route"
                  @click="nexttop(subItem.route)"
                >
                  <template slot="title">
                    <span>{{ subItem.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </label>
          </el-menu>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>
<script>
import { menu } from "@/api";
export default {
  name: "Aside",
  data() {
    return {
      drawer: false,
      drawersize: "35%",
      width: "100%",
      height: "100%",
      menulist: [],
      currentroute: "",
    };
  },
  created() {
    menu().then((res) => {
      const menulist = res.data;
      this.menulist = menulist;
    });
  },
  methods: {
    nexttop(nexttop) {
      if (nexttop.startsWith("http")) {
        window.location.href = nexttop;
      } else if (nexttop.startsWith("mailto")) {
        this.drawer = false;
        window.location.href = nexttop;
      } else if (nexttop.startsWith("/")) {
        this.drawer = false;
        this.currentroute = nexttop;
      } else {
        this.drawer = false;
        console.error("路径不存在");
      }
    },
  },
};
</script>
<style>
/* 侧边栏触发图片 */
.aside-img {
  width: 80%;
  height: 80%;
}
/* 选择框 */
.el-drawer__body {
  background: #0b6cb8;
}
/* 子选择框 */
.el-menu-item,
.el-submenu__title {
  text-align: center;
  padding: 0.2rem !important;
  line-height: 1.8em !important;
  font-size: 0.72rem !important;
  height: auto !important;
  border-bottom: 1px solid #084fb0;
}
.el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #084fb0 !important;
}
/* 下拉菜单的子菜单 */
.el-menu--inline {
  text-align: left;
}
/* submenu图标 */
.el-submenu__icon-arrow {
  right: 0.32rem !important;
}
/* 下拉菜单的单个子菜单 */
.el-submenu .el-menu-item {
  min-width: 0px !important;
  overflow: hidden !important;
  background: #084fb0 !important;
}
/* 下拉菜单的标题栏 */
.el-menu-item-group__title {
  display: none;
}
/* 菜单首页选项 */
.aside-label:first-child li {
  margin-top: 40%;
}
</style>
